<template>
	<!--选择上门时间 弹窗  str -->
	<uni-popup ref="showTimepopup" type="bottom" :mask-click="false">
		<view class="popup-time">
			<view class="lable_top">
				选择预约时间
				<uni-icons
					class="icon"
					color="#aaa"
					@click="closePopup()"
					size="22"
					type="closeempty"
				></uni-icons>
			</view>
			<view class="bodyer_time">
				<view class="bodyer-left">
					<view
						v-for="(item, index) in TimeDateList"
						:key="index"
						class="left-item"
						:class="chackDateIndex == index ? 'active_item' : ''"
						@click="chackDate(item, index)"
					>
						<text>{{ item.text }}</text>
					</view>
				</view>
				<!-- :class="`${chackDateTimeIndex==index?'active_item':''}`" -->
				<view class="">
					<scroll-view
						class="bodyer-rigth"
						scroll-y="true"
						:scroll-into-view="tabCurrent"
					>
						<view
							v-for="(item, index) in timeList"
							:key="index"
							:id="`id${index}`"
						>
							<!-- 可以点击选择 -->
							<p
								class="left-item"
								v-if="isSelective(item)"
								@click="chackDateTime(item, index)"
							>
								{{ item }}
							</p>
							<p
								class="left-item"
								:class="`${!isSelective(item) ? 'is-show' : ''}`"
								v-else
							>
								{{ item }}
							</p>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
	</uni-popup>
</template>

<script setup lang="ts">
	import {ref, toRefs, watch, onMounted, nextTick} from 'vue';
	// import store from '@/store/index.js'
	const chackDateIndex = ref(0); //选中的日期下标
	const chackDateTimeIndex = ref(null); //选中的日期时间下标
	const showTimepopup = ref(null); //选择上门时间 弹窗
	const timeList = ref([
		'06:00~09:00',
		'09:00~12:00',
		'12:00~15:00',
		'15:00~18:00',
		'18:00~21:00',
		'21:00~24:00',
	]);
	const TimeDateList = ref([]); //日期列表
	const dateVal = ref(null);
	const time = ref('');
	const props = defineProps({
		//子组件接收父组件传递过来的值
		showpopup: Boolean,
		workId: String,
		setTimeObj: Object,
	});
	// const scrollRef=ref()
	//使用父组件传递过来的值
	const {showpopup, workId, setTimeObj} = toRefs(props);
	const emit = defineEmits(['set-popup', 'value-change']);
	const closePopup = () => {
		showTimepopup.value.close();
		emit('set-popup', false);
	};

	const openPopup = () => {
		showTimepopup.value.open();
		emit('set-popup', true);
	};
	watch(showpopup, (n) => {
		if (n) {
			openPopup();
			getTimeDateList();
		} else {
			tabCurrent.value = 'id0';
			closePopup();
		}
	});
	const tabCurrent = ref('id0');
	//获取时间日期
	const getTimeDateList = () => {
		let today = new Date();
		let weeks = new Array(
			'周日',
			'周一',
			'周二',
			'周三',
			'周四',
			'周五',
			'周六',
		);
		TimeDateList.value = [];
		for (var i = 0; i <= 4; i++) {
			let date = new Date(today.getTime() + i * 24 * 60 * 60 * 1000);
			var year = date.getFullYear();
			var month = date.getMonth() + 1;
			var day = date.getDate();
			var nowWeek = weeks[date.getDay()];
			let tmp = '';
			if (i == 0) {
				tmp = '今天(' + nowWeek + ')';
			} else if (i == 1) {
				tmp = '明天(' + nowWeek + ')';
			} else {
				tmp = month + '月' + day + '日' + '(' + nowWeek + ')';
			}
			TimeDateList.value.push({
				text: tmp,
				date: year + '-' + month + '-' + day,
			});
		}
		let indexItem = timeList.value.findIndex((o) => {
			return isSelective(o);
		});
		nextTick(() => {
			tabCurrent.value = `id${indexItem}`;
		});
	};
	// 选中的日期
	const chackDate = (item, index) => {
		chackDateIndex.value = index;
		dateVal.value = TimeDateList.value[chackDateIndex.value];
		chackDateTimeIndex.value = null;
		time.value = '';
	};
	// 选中的日期时间
	const chackDateTime = (item, index) => {
		chackDateTimeIndex.value = index;
		time.value = timeList.value[chackDateTimeIndex.value];
		dateVal.value = TimeDateList.value[chackDateIndex.value];
		emit('value-change', {
			dateVal: dateVal.value,
			time: time.value,
			chackDateIndex: chackDateIndex.value,
			chackDateTimeIndex: chackDateTimeIndex.value,
		});
		closePopup();
		chackDateTimeIndex.value = null;
		time.value = '';
	};

	/**
	 * 判断时间段是否可选
	 * @param item - 时间段
	 */
	const isSelective = (item: string) => {
		// 获取时间段开始时间的小时
		let isH = item.split('~')[0].split(':')[0]; //14
		
		// 获取时间段结束时间的小时
		let isEnd = item.split('~')[1].split(':')[0]; //16
		
		// 获取当前的时间
		let today = new Date();
		
		// 获取当前时间的小时
		var hh = today.getHours();
		
		/**
		 * 判断预约时间的设置是否为24小时
		 * 1-不启用
		 * 2-24小时
		 * 3-时间范围
		 */
		if (setTimeObj.value.reservationTimeType == 2) {
			if (chackDateIndex.value == 0) {
				// 左侧的日期选择了今天
				if (hh <= isH) {
					return true;
				} else {
					if (hh >= 24) {
						chackDateIndex.value = 1;
					}
					return false;
				}
			} else {
				// 左侧的日期选择了今天以外的，就所有时间段都可以选择
				return true;
			}
		} else {
			// 工单模块的预约时间设置为：不启用或时间范围
			// 获取工单模块预约时间的时间范围的开始时间的小时
			let setStart = setTimeObj.value.reservationStartTime.split(':')[0];
			
			// 获取时间范围的结束时间的小时
			let setEnd =
				setTimeObj.value.reservationEndTime.split(':')[0] == 0
					? 24
					: setTimeObj.value.reservationEndTime.split(':')[0];
			if (chackDateIndex.value == 0) {
				// 左侧日期选择了今天
				if (hh <= isH) {
					if (setStart < isH && setEnd >= isEnd) {
						return true;
					} else {
						return false;
					}
				} else {
					if (hh >= setEnd && isEnd >= setEnd) {
						chackDateIndex.value = 1;
					}
					return false;
				}
			} else {
				if (isH > setStart && setEnd >= isEnd) {
					return true;
				} else {
					return false;
				}
			}
		}
	};
</script>

<style scoped lang="scss">
	.popup-time {
		background-color: #fff;
		height: 600rpx;
		border-radius: 40rpx 40rpx 0 0;
		width: 100%;
		position: relative;
		overflow-y: auto;

		.lable_top {
			text-align: center;
			line-height: 100rpx;
			background-color: #fff;
			border-radius: 40rpx 40rpx 0 0;
			height: 100rpx;
			border-bottom: 1rpx solid #eee;

			.icon {
				position: absolute;
				right: 40rpx;
			}
		}

		.bodyer_time {
			display: flex;
			height: calc(100% - 102rpx);

			.bodyer-left {
				background-color: #eee;

				.left-item {
					padding: 20rpx;
				}

				.active_item {
					background-color: #fff;
					color: #007cff;
				}
			}

			.bodyer-rigth {
				height: 100%;
				padding-bottom: 60rpx;
				box-sizing: border-box;
				:deep(.uni-scroll-view) {
					-ms-overflow-style: none;
					/* IE and Edge */
					scrollbar-width: none;
					/* Firefox */
					&::-webkit-scrollbar {
						width: 0;
						height: 0;
						background-color: transparent;
					}
				}

				.left-item {
					margin: 20rpx 60rpx;
				}

				.is-show {
					color: #eee;
				}

				.active_item {
					color: #007cff;
				}
			}
		}
	}

	:deep(.uni-popup) {
		z-index: 999;
	}
</style>
